<template>
    <div>
        <!-- 首页画作推荐 -->
        <div class="art-exhibition-title indextitle">
            <img src="@/assets/images/画作推荐.jpg" alt="" class="hot-icon">
            <div class="details">
                <svg @click="$router.push('/paintingInside')" t="1674987056061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2285"><path stroke="#999999" stroke-width="25" d="M362.666667 896c-4.266667 0-8.533333 0-12.8-4.266667-8.533333-8.533333-8.533333-21.333333-4.266667-29.866666L631.466667 512 345.6 162.133333c-8.533333-8.533333-4.266667-21.333333 4.266667-29.866666 8.533333-8.533333 21.333333-4.266667 29.866666 4.266666l298.666667 362.666667c8.533333 8.533333 8.533333 21.333333 0 25.6l-298.666667 362.666667c-4.266667 4.266667-12.8 8.533333-17.066666 8.533333z" fill="#999999" p-id="2286"></path></svg>
            </div>
        </div>
        <!-- 板块外层盒子 -->
        <el-container class="paintingRe-box" style="display: flex; flex-wrap: wrap;">
            <!-- 3张卡片 -->
            <el-card v-for="(o, index) in painting" :key="index" shadow="never" :body-style="{ padding: '0px',height: '5.55rem'}" class="card">
                <img :src="require('../../../../server/public/images/index/paintingRecommend/' + o.img)" class="image">
                <div class="cardbottom">
                    <el-row style="margin-top: .16rem">
                        <el-col>
                            <p class="title text-h2">{{o.name}}</p>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: .16rem">
                        <el-col class="text1" style="color: #fff;">
                            {{o.author}}&nbsp;&nbsp;{{o.time}}
                        </el-col>
                    </el-row>
                    <svg t="1675314594945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2965"><path d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z" fill="#ffffff" p-id="2966"></path></svg>
                </div>
            </el-card>
        </el-container>
    </div>
</template>

<script>
export default {
    name: 'WorkspaceJsonPaintingRecommend',

    data() {
        return {
            painting: [
                {id: 1, name: '《建筑随想曲》', img: '建筑随想曲.jpg', author: '乔瓦尼•保罗', time: 1877},
                {id: 2, name: '《忏悔的抹大拉》', img: '忏悔的抹大拉.jpg', author: '圭多•雷尼', time: 1635},
                {id: 3, name: '《圣母与蓝色王冠》', img: '圣母与蓝色王冠.jpg', author: '拉斐尔•桑西', time: 1510},
            ]
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style scoped>
@import '@/assets/css/index/PaintingRecommend/PaintingRecommend.min.css'
</style>